import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import moment from 'moment'; //导入模块
import store from './store/index'


new Vue({
  router,
  store,
  render: function (h) { return h(App) },
}).$mount('#app')

moment.locale('zh-cn'); //设置语言 或 moment.lang('zh-cn'); 
Vue.prototype.$moment = moment;//赋值使用
Vue.config.productionTip = false



// 前置导航守卫(也叫前置钩子) : 在页面跳转之前调用beforeeach函数  改掉了meta属性
// 实现不同页面有不同的标题 调用引用进来的router对象里的beforeeach()方法, 必须调用next()方法, 否则无法向下执行代码
router.beforeEach((to, from, next) => {
  // 1.to代表的就是到哪个路由去,会执行beforeEach函数
  // 2.把.matched[0].meta.title 赋值给 当前页面的title属性即可     
  // 3.title是每个路由里自定义的属性名
  document.title = to.matched[0].meta.title
  next()
})

// 后置导航守卫(也叫后置钩子)
router.afterEach((to, from, next) => {
  // console.log(to.matched[0].meta.title);
  // 这里已经结束了就不能调用next()了
})


Vue.directive('real-img', async function (el, binding) {//指令名称为：real-img
  let imgURL = binding.value;//获取图片地址
  if (imgURL) {
    let exist = await imageIsExist(imgURL);
    if (exist) {
      el.setAttribute('src', imgURL);
    }
  }
})

/**
* 检测图片是否存在
*/
let imageIsExist = function (url) {
  return new Promise((resolve) => {
    var img = new Image();
    img.onload = function () {
      if (this.complete == true) {
        resolve(true);
        img = null;
      }
    }
    img.onerror = function () {
      resolve(false);
      img = null;
    }
    img.src = url;
  })
}